<template>
  <div>
    <div class="m_des">
      <table border="0" style="width:870px; line-height:22px;" cellspacing="0" cellpadding="0">
        <tbody>
          <tr valign="top">
            <td width="115"><img :src="require('@/assets/images/user.jpg')" width="90" height="90" /></td>
            <td>
              <div class="m_user">{{ userInfo.username }}</div>
              <p>
                等级：{{ userInfo.level }} <br />
                <span style="color: #ff4e00;">您还差 {{ userInfo.pointsToNextLevel }} 积分达到 {{ userInfo.nextLevel }}</span><br />
                上一次登录时间: {{ userInfo.lastLoginTime }}<br />
                <span v-if="!userInfo.isEmailVerified">
                  您还没有通过邮件认证 <a href="#" style="color:#ff4e00;" @click.prevent="sendVerificationEmail">点此发送认证邮件</a>
                </span>
              </p>
              <div class="m_notice">
                {{ userCenterNotice }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>	
    </div>
    
    <div class="mem_t">资产信息</div>
    <table border="0" class="mon_tab" style="width:870px; margin-bottom:20px;" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="33%">用户等级：<span style="color:#555555;">{{ userInfo.level }}</span></td>
          <td width="33%">消费金额：<span>￥{{ userInfo.totalSpent }}元</span></td>
          <td width="33%">返还积分：<span>{{ userInfo.points }}R</span></td>
        </tr>
        <tr>
          <td>账户余额：<span>￥{{ userInfo.balance }}元</span></td>
          <td>红包个数：<span style="color:#555555;">{{ userInfo.redPackets }}个</span></td>
          <td>红包价值：<span>￥{{ userInfo.redPacketsValue }}元</span></td>
        </tr>
        <tr>
          <td colspan="3">订单提醒：
            <span style="font-family:'宋体';">
              待付款(<span>{{ orderReminders.unpaid }}</span>) &nbsp; &nbsp; &nbsp; &nbsp; 
              待收货(<span>{{ orderReminders.undelivered }}</span>) &nbsp; &nbsp; &nbsp; &nbsp; 
              待评论(<span>{{ orderReminders.uncommented }}</span>)
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="mem_t">账号信息</div>
    <table border="0" class="acc_tab" style="width:870px;" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class="td_l">用户ID： </td>
          <td>{{ userInfo.id }}</td>
        </tr>
        <tr>
          <td class="td_l b_none">身份证号：</td>
          <td>{{ userInfo.idCardMasked }}</td>
        </tr>
        <tr>
          <td class="td_l b_none">电  话：</td>
          <td>{{ userInfo.phoneMasked }}</td>
        </tr>
        <tr>
          <td class="td_l">邮   箱： </td>
          <td>{{ userInfo.emailMasked }}</td>
        </tr>
        <tr>
          <td class="td_l b_none">注册时间：</td>
          <td>{{ userInfo.registerTime }}</td>
        </tr>
        <tr>
          <td class="td_l">完成订单：</td>
          <td>{{ userInfo.completedOrders }}</td>
        </tr>
        <tr>
          <td class="td_l b_none">邀请人：</td>
          <td>{{ userInfo.inviter }}</td>
        </tr>
        <tr>
          <td class="td_l">登录次数：</td>
          <td>{{ userInfo.loginCount }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    },
    orderReminders: {
      type: Object,
      default: () => ({})
    },
    userCenterNotice: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendVerificationEmail() {
      this.$emit('send-verification-email')
    }
  }
}
</script>

<style scoped>
/* 用户详情样式 */
</style>